<template>
	<div class="register absolute" :style="colorStyle">
		<!-- <div class="shading">
			<div class="pictrue acea-row row-center-wrapper">
				<image src="../static/logo2.png" />
			</div>
		</div> -->
		<div class="whiteBg">
			<div class="title">重置密码</div>
			<div class="list">
				<div class="item">
					<div class="acea-row row-middle">
						<image src="../static/phone_1.png"></image>
						<input type="text" placeholder="输入手机号码" v-model="account" />
					</div>
				</div>
				<div class="item">

					<div class="acea-row row-middle">
						<image src="../static/code_2.png"></image>
						<input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
						<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">
							{{ text }}
						</button>
					</div>
				</div>
				<div class="item">
					<div class="acea-row row-middle">
						<image src="../static/code_2.png"></image>
						<input type="password" placeholder="填写您的新密码" v-model="password" />
					</div>
				</div>
				<div class="item" v-if="isShowCode">
					<div class="align-left">
						<input type="text" placeholder="填写验证码" class="codeIput" v-model="codeVal" />
						<div class="code" @click="again"><img :src="codeUrl" /></div>
					</div>
				</div>
			</div>
			<div class="logon" @click="registerReset">确认</div>
			<div class="tip">
				<span class="font-color-red" @click="back">立即登录</span>
			</div>
		</div>
		<div class="bottom"></div>
		</view>
		<Verify @success="success" :captchaType="'blockPuzzle'" :imgSize="{ width: '330px', height: '155px' }"
			ref="verify"></Verify>
	</div>
</template>

<script>
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	import colors from '@/mixins/color.js';
	import Verify from '@/components/verify/verify.vue';
	import {
		registerVerify,
		registerReset,
		getCodeApi
	} from "@/api/user";
	// import { validatorDefaultCatch } from "@/utils/dialog";
	// import attrs, { required, alpha_num, chs_phone } from "@utils/validate";
	// import { VUE_APP_API_URL } from "@utils";

	export default {
		name: "RetrievePassword",
		components: {
			Verify
		},
		data: function() {
			return {
				account: "",
				password: "",
				captcha: "",
				keyCode: "",
				codeUrl: "",
				codeVal: "",
				isShowCode: false
			};
		},
		mixins: [sendVerifyCode,colors],
		mounted: function() {
			this.getCode();
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			again() {
				this.codeUrl =
					VUE_APP_API_URL + "/captcha?" + this.keyCode + Date.parse(new Date());
			},
			// getCode() {
			// 	getCodeApi()
			// 		.then(res => {
			// 			this.keyCode = res.data.key;
			// 		})
			// 		.catch(res => {
			// 			this.$util.Tips({
			// 				title: res.msg.msg || '加载失败'
			// 			})
			// 		});
			// },
			async registerReset() {
				var that = this;
				if (!that.account) return that.$util.Tips({
					title: '请填写手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if (!that.captcha) return that.$util.Tips({
					title: '请填写验证码'
				});
				registerReset({
						account: that.account,
						captcha: that.captcha,
						password: that.password,
						code: that.codeVal
					})
					.then(res => {
						that.$util.Tips({
							title: res.msg
						}, {
							tab: 3
						})
					})
					.catch(res => {
						that.$util.Tips({
							title: res
						})
					});
			},
			success(data) {
				console.log(data,'data');
				this.$refs.verify.hide()
				getCodeApi()
					.then(res => {
						this.keyCode = res.data.key;
						this.getCode(data);
					})
					.catch(res => {
						this.$util.Tips({
							title: res
						});
					});
			},
			code(data) {
				let that = this;
				if (!that.account) return that.$util.Tips({
					title: '请填写手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if (that.formItem == 2) that.type = "register";
				this.$refs.verify.show()
				// await registerVerify({
				// 		phone: that.account,
				// 		type: that.type,
				// 		key: that.keyCode,
				// 		code: that.codeVal
				// 	})
				// 	.then(res => {
				// 		this.$util.Tips({
				// 			title: res.msg || '加载失败'
				// 		})
				// 		that.sendCode();
				// 	})
				// 	.catch(res => {
				// 		that.$util.Tips({
				// 			title: res
				// 		});
				// 	});
			},
			async getCode(data){
				console.log('data-------',data);
				let that = this;
				await registerVerify({
						phone: that.account,
						type: that.type, 
						key: that.keyCode,
						captchaType: 'blockPuzzle',
						captchaVerification: data.captchaVerification,
					})
					.then(res => {
						that.$util.Tips({
							title: res.msg
						});
						that.sendCode();
					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.register {
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}

	.register .shading {
		background-image: url("");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 286rpx;
		padding-top: 70rpx;
	}

	.register .shading .pictrue {
		width: 172rpx;
		height: 172rpx;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, .8);
		margin: 0 auto
	}

	.register .shading .pictrue image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 50%;
		display: block
	}

	.register .whiteBg {
		width: 620rpx;
		border-radius: 16rpx;
		background-color: #fff;
		margin: 0rpx auto 0 auto;
		padding: 200rpx 30rpx 0 30rpx
	}

	.register .whiteBg .title {
		font-size: 36rpx;
		color: #282828;
		text-align: center;
		font-weight: 700
	}

	.register .whiteBg .title .item~.item {
		margin-left: 85rpx
	}

	.register .whiteBg .title .item {
		color: #999;
		border-bottom: 5rpx solid #fff;
	}

	.register .whiteBg .title .item.on {
		color: #282828;
		border-bottom-color: #f35749
	}

	.register .whiteBg .list {
		margin-top: 80rpx;
	}

	.register .whiteBg .list .item {
		border-bottom: 1rpx solid #ededed;
		padding: 40rpx 0;
		position: relative;
		width: 100%;
		box-sizing: border-box;
	}

	.register .whiteBg .list .item .name {
		font-size: 26rpx;
		color: #2d3342;
		margin-bottom: 27rpx;
		text-align: left
	}

	.register .whiteBg .list .item image {
		width: 24rpx;
		height: 28rpx;
		display: block
	}

	.register .whiteBg .list .item input {
		font-size: 32rpx;
		flex: 1;
		margin-left: 20rpx
	}

	.register .whiteBg .list .item .placeholder {
		color: #ccc
	}

	.register .whiteBg .list .item .codeIput {
		width: 250rpx;
		margin-left: 20rpx
	}

	.register .whiteBg .list .item .code {
		position: absolute;
		color: var(--view-theme);
		line-height: 50rpx;
		text-align: center;
		bottom: 38rpx;
		background-color: #fff;
		right: 0;
		font-size: 26rpx
	}

	.register .whiteBg .list .item .code.on {
		background-color: #fff;
	}

	.register .whiteBg .list .forgetPwd {
		text-align: right;
		font-size: 28rpx;
		color: #666;
		margin-top: 20rpx
	}

	.register .whiteBg .list .forgetPwd .iconfont {
		font-size: 30rpx;
		margin-right: 10rpx;
		vertical-align: middle
	}

	.register .whiteBg .logon {
		font-size: 34rpx;
		color: #fff;
		background: linear-gradient(135deg, var(--view-minorColor) 0%, var(--view-theme) 100%);
		height: 86rpx;
		border-radius: 43rpx;
		text-align: center;
		line-height: 86rpx;
		margin-top: 47rpx
	}

	.register .whiteBg .tip {
		height: 110rpx;
		text-align: center;
		line-height: 105rpx;
		font-size: 30rpx;
		color: #ccc
	}

	.register .bottom {
		background-image: url("");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 620rpx;
		height: 36rpx;
		margin: 0 auto;
	}

	// 首页修改轮播内部样式；
	.code img {
		width: 100%;
		height: 100%;
	}
</style>
